<template>
  <div>
    <div style="text-align: left;">场馆名：<el-input @change="loadAllVenue()" v-model="venueNameChos" style="width: 30%;"
        placeholder="请输入场馆名称"></el-input>
    </div>
    <el-table :data="page.records" border>

      <el-table-column prop="venueId" label="场馆ID" width="65">
      </el-table-column>

      <el-table-column prop="venueName" label="场馆名" width="110">
      </el-table-column>
      <el-table-column prop="venueImage" label="场馆图片" width="130">
        <template #default="scope">
          <img :src="scope.row.venueImage" alt="场馆图片" style="max-width: 110px; max-height: 110px">
        </template>
      </el-table-column>

      <el-table-column prop="businessStartTime" label="营业开始时间" width="100">
      </el-table-column>
      <el-table-column prop="businessEndTime" label="营业结束时间" width="100">
      </el-table-column>

      <el-table-column prop="venueAddress" label="地址" width="150">
      </el-table-column>

      <el-table-column prop="area" label="面积" width="50">
      </el-table-column>

      <el-table-column prop="classroomNum" label="教室数量" width="50">
      </el-table-column>

      <el-table-column prop="score" label="评分" width="50">
      </el-table-column>

      <el-table-column label="操作" width="140">
        <template #default="scope">

          <el-button @click="apply(scope.row.venueId)" type="text" size="small">申请入驻</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum"
      :page-sizes="[1, 2, 3, 5]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>


  </div>
</template>

<script>
  export default {
    name: "CoachAttestationVenue",
    data() {
      return {
        page: {},
        param: {
          pageNum: 1,
          pageSize: 5,
        },
        venueNameChos: "",
        venueStateChos: "",

      };
    },
    methods: {
      apply(id) {
        this.$http.post("/venue/yCoachEnter/addCoachEnterVenue", {
          enterVenueId: id
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllVenue();
        })
      },
      //分页方法
      handleSizeChange(val) {
        this.param.pageSize = val;
        this.loadAllVenue();
      },
      handleCurrentChange(val) {
        this.param.pageNum = val;
        this.loadAllVenue();
      },
      //载入所有可以申请的场馆
      loadAllVenue() {
        this.$http.post("/venue/yVenueBase/pageVenueBaseApply", {
          pageNum: this.param.pageNum,
          pageSize: this.param.pageSize,
          venueName: this.venueNameChos
        }).then(resp => {
          this.page = resp.data.data;
        })
      }
    },
    created() {
      this.loadAllVenue();
    }
  }
</script>

<style>
</style>
